<template>
  <div class="city">
		<city-header></city-header>
		<city-search :cities="cities"></city-search>
		<city-list :cities="cities" :hotCities="hotCities"></city-list>
	</div>
</template>

<script>
	import {getCities} from '@/api'
	import CityHeader from 'citybase/Header'
	import CitySearch from 'citybase/Search'
	import CityList from 'citybase/List'
	
export default {
  name:'City',
	data(){
		return {
			cities: [],
			hotCities: []
		}
	},
  components:{
		CityHeader,
		CitySearch,
		CityList
  },
	created() {
		this.getCityData();
	},
	methods: {
		// 定义一个异步方法拿数据
		async getCityData(){
			let {cities,hotCities} = await getCities()
			this.cities = cities;
			this.hotCities = hotCities;      
		}
	},
}
</script>

<style lang='stylus' scoped>

</style>
